<template>
  <view class="page">
    <!-- 顶部登录区域 -->
    <view class="login-section">
      <div class="cover-detail">
        <image class="login-cover-image" src="/static/images/login-cover.png" mode=""></image>
        <view class="login-detail" @click="handleLogin">
          <view class="login-prompt">点击登录/注册
            <image
              class="right-icon"
              src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png"
              alt=""
            ></image>
          </view>
          <view class="login-desc">可查看更多信息</view>
        </view>
      </div>
      <div class="sys">
        <image class="sys-image" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201848%402x.png" mode=""></image>
      </div>
    </view>


    <!-- 统计数据区域 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-value">120</text>
        <text class="stat-label">销售量</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">120</text>
        <text class="stat-label">获赞</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">120</text>
        <text class="stat-label">粉丝</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">120</text>
        <text class="stat-label">关注</text>
      </view>
    </view>

    <!-- 功能入口区域 -->
    <view class="function-section">
      <view class="function-item" @click="navigateTo('works')">
        <div class="function-detail">
          <div class="function-name">作品中心</div>
          <div class="function-desc">快来查看作品吧！</div>
        </div>
        <image class="function-icon works-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201810%402x.png"></image>
      </view>
      <view class="function-item" @click="navigateTo('wallet')">
        <div class="function-detail">
          <div class="function-name">我的钱包</div>
          <div class="function-desc">可以体现哦！</div>
        </div>
        <image class="function-icon wallet-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201804%402x.png"></image>
      </view>
    </view>

    <!-- 订单状态区域 -->
    <view class="order-section">
      <view class="section-title-header">
        <view class="section-title">我的订单</view>
        <view class="order-all">全部订单</view>
      </view>
      <view class="order-status">
        <view class="status-item" @click="navigateTo('orders', 'all')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201816%402x.png" mode="heightFix"></image>
          <text class="status-name">待付款</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'unshipped')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201818%402x.png" mode="heightFix"></image>

          <text class="status-name">待发货</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'unreceived')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201823%402x.png" mode="heightFix"></image>

          <text class="status-name">待收货</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'refund')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201827%402x.png" mode="heightFix"></image>
          <text class="status-name">退款售后</text>
        </view>
      </view>
    </view>

    <!-- 其他功能区域 -->
    <view class="designer-section">
      <div class="left">
        <image class="other-icon join-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202157%402x.png"></image>
        <text class="other-name">品牌/个人设计师入驻</text>
      </div>
      <div class="left right">
        <text class="other-desc">诚邀优质商家</text>
        <image
          class="right-icon"
          src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png"
          alt=""
        ></image>
      </div>
    </view>

    <view class="order-section">
      <view class="section-title-header">
        <view class="section-title">更多功能</view>
      </view>
      <view class="order-status">
        <view class="status-item" @click="navigateTo('orders', 'all')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201833%402x.png" mode="heightFix"></image>
          <text class="status-name">浏览记录</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'unshipped')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201835%402x.png" mode="heightFix"></image>
          <text class="status-name">收获地址</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'unreceived')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202169%402x.png" mode="heightFix"></image>
          <text class="status-name">优惠券</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'refund')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202318%402x.png" mode="heightFix"></image>
          <text class="status-name">客服</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'refund')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202319%402x.png" mode="heightFix"></image>
          <text class="status-name">意见反馈</text>
        </view>
        <view class="status-item" @click="navigateTo('orders', 'refund')">
          <image class="status-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202171%402x.png" mode="heightFix"></image>
          <text class="status-name">开票中心</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 处理登录
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};

// 页面导航
const navigateTo = (page, type = '') => {
  let url = '';

  switch(page) {
    case 'works':
      url = '/pages/works/works';
      break;
    case 'wallet':
      url = '/pages/wallet/wallet';
      break;
    case 'orders':
      url = type ? `/pages/orders/orders?type=${type}` : '/pages/orders/orders';
      break;
    case 'join':
      url = '/pages/join/join';
      break;
    case 'history':
      url = '/pages/history/history';
      break;
    case 'address':
      url = '/pages/address/address';
      break;
    case 'coupons':
      url = '/pages/coupons/coupons';
      break;
    case 'service':
      url = '/pages/service/service';
      break;
    case 'feedback':
      url = '/pages/feedback/feedback';
      break;
    case 'invoice':
      url = '/pages/invoice/invoice';
      break;
  }

  if (url) {
    uni.navigateTo({
      url: url
    });
  }
};
</script>

<style lang="scss" scoped>
.right-icon {
  width: 12rpx;
  height: 20rpx;
  margin-left: auto;
}
.page {
  background: #FFFFFF;
}
.login-section {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #FFFFFF;
  .cover-detail {
    display: flex;
    align-items: center;
    .login-cover-image {
      width: 100rpx;
      height: 100rpx;
      background: #F25A27;
      border: 2rpx solid #FFA5A5;
      border-radius: 50%;
    }
    .login-detail {
      padding: 0 24rpx;
      .login-prompt {
        display: flex;
        align-items: center;
        height: 42rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 42rpx;
        gap: 12rpx;
      }
      .login-desc {
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 32rpx;
        margin-top: 12rpx;
      }
    }
  }
  .sys {
    .sys-image {
      width: 32rpx;
      height: 30rpx;
    }
  }
}

.stats-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 58rpx;
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .stat-value {
      height: 42rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
      line-height: 42rpx;
      text-align: center;
    }
    .stat-label {
      height: 32rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
      text-align: center;
      margin-top: 6rpx;
    }
  }
}

.function-section {
  display: flex;
  align-items: center;
  padding: 0 16rpx;
  gap: 24rpx;
  margin: 16rpx 0;
  .function-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 347rpx;
    height: 148rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.08);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 16rpx;
    .function-detail {
      .function-name {
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 44rpx;
      }
      .function-desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #6F6F6F;
        line-height: 32rpx;
        margin-top: 8rpx;
      }
    }
    .function-icon {
      width: 84rpx;
      height: 84rpx;
      box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0,0,0,0.08);    }
  }
}

.order-section {
  background: #FFFFFF;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 22rpx 16rpx;

  padding: 34rpx 24rpx;
  .section-title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .section-title {
      height: 28rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      line-height: 28rpx;
      position: relative;
      &::after {
        position: absolute;
        bottom: -4rpx;
        left: 0;
        content: "";
        width: 72rpx;
        height: 4rpx;
        background: #F25A27;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
    }
    .order-all {
      width: 114rpx;
      height: 40rpx;
      background: #F3F7F8;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: center;
    }
  }
  .order-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30rpx 0 22rpx;
    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .status-icon {
        width: 48rpx;
        height: 44rpx;
      }
      .status-name {
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 32rpx;
        text-align: center;
        margin-top: 20rpx;
      }
    }
  }
}

.designer-section {
  height: 96rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx;
  margin: 22rpx 16rpx;
  .left {
    display: flex;
    align-items: center;
    gap: 12rpx;
    .other-icon {
      width: 48rpx;
      height: 48rpx;
    }
    .orther-name {
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      line-height: 28rpx;
    }
  }
  .right {
    .other-desc {
      font-weight: 400;
      font-size: 24rpx;
      color: #6F6F6F;
      line-height: 32rpx;
    }
  }
}
</style>
